<template>
    <div>
        <!-- multiple -->
        <el-upload action="#" ref="uploadFile" :headers="headers" :on-change="changeFiles" list-type="picture-card"
            :auto-upload="false" :limit="1" :file-list="srcList">
            <i slot="default" class="el-icon-plus"></i>
            <div slot="file" slot-scope="{file}">
                <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
                <span class="el-upload-list__item-actions">
                    <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                        <i class="el-icon-zoom-in"></i>
                    </span>
                    <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                        <i class="el-icon-delete"></i>
                    </span>
                </span>
            </div>
        </el-upload>


        <el-dialog :visible.sync="dialogVisible" style="z-index: 999" append-to-body>
            <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
    </div>
</template>
<script>
import { getToken } from "@/utils/auth";

export default {
    name: 'StationImage',
    props: {
        pvImageUrl: {
            type: String,
            default: null
        }
    },
    watch: {
        pvImageUrl: {
            handler: function (val) {
                if (val) {
                    this.srcList = [
                        { name: '电站', url: this.baseUrl + val }
                    ]
                }
            },
        }
    },
    data() {
        return {
            //文件数据
            dialogImageUrl: '',
            dialogVisible: false,
            disabled: false,
            baseUrl: process.env.VUE_APP_BASE_API,
            allowUploadFileType: "'jpg','jpeg','png'",
            headers: {
                Authorization: "Bearer " + getToken(),
            },
            fileList: [],
            srcList: [],
            loadingUpload: null,
            //^文件数据
        }
    },
    created() {
        if (this.pvImageUrl) {
            this.srcList = [
                { name: '电站', url: this.baseUrl + this.pvImageUrl }
            ]
        }
    },
    mounted() {
        // this.$refs.uploadFile.clearFiles();
    },
    methods: {
        /** 获取文件列表 */
        changeFiles(file, fileList) {
            //文件上传限制
            if (!this.allowUploadFileType.includes(this.getFileType(file.raw.name))) {
                this.$message({
                    message: '只能上传' + this.allowUploadFileType + '格式的文件！请重新上传',
                    type: 'error'
                })
                fileList.splice(Array.from(fileList).length - 1, 1)
            } else {
                this.fileList.push(file.raw)
                this.$emit('getStationImage', this.fileList)
            }
        },
        /** 删除文件 */
        handleRemove(file) {
            // 删除文件
            this.$refs.uploadFile.handleRemove(file);
            let i = this.fileList.indexOf(file.raw);
            this.fileList.splice(i, 1);
        },
        /** 预览文件 */
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        clearStationFiles() {
            this.$refs.uploadFile.clearFiles();
        }
    },
}
</script>
<style lang="">

</style>
